<template>
  <div>
    <input  v-model="searchKeyword"  @input="handleSearch" placeholder="输入关键字搜索">
    <table class="my-table">
      <thead>
        <tr>
          <th>就诊日期</th>
          <th>医生姓名</th>
          <th>诊断结果</th>
          <th>处方信息</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,index) in filteredData" :key="index">
          <td>{{item.date}}</td>
          <td>{{ item.doctor }}</td>
          <td>{{ item.diagnosis }}</td>
          <td>{{item.prescription}}</td>
          <td @click="look(item)">详情</td>
        </tr>
      </tbody>
    </table>
    <div v-show="ischange">
      <ModalMask  :sonitem="selectedItem"  :visible.sync="ischange"></ModalMask>
    </div>
    </div>
</template>
<script>
import ModalMask from './components/ModalMask.vue'

export default {
  components: {
    ModalMask
  },
  data() {
    return{
      searchKeyword: '',
      records: [
          {
            date: '2022-01-01',
            doctor: '张三',
            diagnosis: '感冒',
            prescription: '感冒药',
          },
          {
            date: '2022-02-01',
            doctor: '李四',
            diagnosis: '头疼',
            prescription: '止疼药',
          },
          {
            date: '2022-03-01',
            doctor: '王五',
            diagnosis: '腰痛',
            prescription: '止痛贴',
          }
        ],
        filteredData: [],
        ischange: false,
        selectedItem: {}
    }
  },
  methods: {
    handleSearch() {
      if (this.searchKeyword.trim() === '') {
        this.filteredData = this.records;
      } else {
        this.filteredData = this.records.filter(item => {
          // 这里可以根据需要添加更多字段
          return item.date.includes(this.searchKeyword) ||
                 item.doctor.includes(this.searchKeyword) ||
                 item.diagnosis.includes(this.searchKeyword) ||
                 item.prescription.includes(this.searchKeyword);
        });
      }
    },
    look(item) {
      this.ischange = true;
      this.selectedItem = item;
    },
  
  },
  created() {
    // 初始化时显示所有数据
    this.filteredData = this.records;
  }
};

</script>

<style scoped>
  .my-table {
    border-collapse: collapse;
    width: 100%;
  }

  .my-table td, .my-table th {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }

  .my-table th {
    background-color: #f2f2f2;
  }
</style>
